import React, { useEffect, useState } from 'react';
import { t } from '@lingui/macro';
import { Button, Timeline, List } from '@alifd/next';
import { useStore } from '@/hooks';
import { uniqueId } from 'lodash';
import { DATETIME_TEXT, ENUMS, column, toSelectDataSource } from '../stores/definitions.js';
import { observer } from 'mobx-react-lite';
import DrawerFooter from '@/components/DrawerFooter';

import style from './receiveDetail.module.scss';

const TimelineItem = Timeline.Item;

const ReceiveDetail = ({ data, onCancel, modal, ...formProps }) => {
  const {
    username,
  } = data || {};
  const { customerStore: store } = useStore();
  const [state, setState] = useState({
    data: [],
    receiverNames: [],
    currentReceiverName: '',
  });
  useEffect(() => { if (modal[1]?.startsWith?.('toClose')) onCancel?.(); }, [modal]);

  useEffect(() => {
    (async () => {
      const res = await store.getManagersInfo({
        search: {
          targetUserUsername: username,
        },
        pg: {
          page: 0,
          size: 999,
        },
      });
      const receivers = new Set(res.map((p) => p.receiverName));
      const currentTime = new Date().toISOString();
      const filteredData = res.filter((item) => new Date(item.endTime) > new Date(currentTime));
      setState({
        ...state,
        data: res,
        receiverNames: Array.from(receivers),
        currentReceiverName: filteredData[0]?.receiverName || '无',
      });
    })();
  }, []);

  return (
    <>
      <div className={style.container}>
        <div className={style.timeLine}>
          <div className={style.topList}>
            {t`当前时间接待客户经理：${state.currentReceiverName}`}
          </div>
          <Timeline
            mode="alternate"
            fold={[
              { foldArea: [1, 2], foldShow: true },
              { foldArea: [1], foldShow: true },
            ]}
          >
            {state.data.map((p) => <TimelineItem key={p.id} title={`客户经理：${p.receiverName}`} content={DATETIME_TEXT(p.crDate)} />)}
          </Timeline>
        </div>
        <div className={style.leftList}>
          <List
            size="small"
            header={<div>{t`客户经理列表：`}</div>}
            dataSource={state.receiverNames}
            renderItem={(item, i) => (
              <List.Item
                key={i}
                title={`${i + 1}、${item}`}
              />
            )}
          />
        </div>
      </div>
      <DrawerFooter>
        <Button style={{ marginLeft: 8 }} onClick={() => onCancel?.()}>{t`取消`}</Button>
      </DrawerFooter>
    </>
  );
};

export default observer(ReceiveDetail);
